<template name="ver">
    <h2>Ver Franjas</h2>
    <div id="borrar_franja" title="Desea borrar esta franja?" style="display: none">
        <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span><strong>Atenci&oacuten!</strong><br/>Al borrar una franja todos los tiempos entre puntos de una ruta asociados a ella ser&aacute;n borrados autom&aacute;ticamente, siendo reemplazados por sus valores por defecto. Desea continuar?</p>
    </div>
    {{pagination}}
    <br/>
    <table>
        <tr>
            <th>Nombre</th>
            <th>D&iacute;as</th>
            <th>Inicio</th>
            <th>Fin</th>
            <th>Acciones</th>
        </tr>
        <template name="franja">
        <tr>
            <td>{{nombre}}</td>
            <td>
                <div class="dias">
                    <input type="checkbox" id="dia_{{idfranja}}_1" {{checked_1}} /><label for="dia_{{idfranja}}_1">Lun</label>
                    <input type="checkbox" id="dia_{{idfranja}}_2" {{checked_2}} /><label for="dia_{{idfranja}}_2">Mar</label>
                    <input type="checkbox" id="dia_{{idfranja}}_3" {{checked_3}} /><label for="dia_{{idfranja}}_3">Mie</label>
                    <input type="checkbox" id="dia_{{idfranja}}_4" {{checked_4}} /><label for="dia_{{idfranja}}_4">Jue</label>
                    <input type="checkbox" id="dia_{{idfranja}}_5" {{checked_5}} /><label for="dia_{{idfranja}}_5">Vie</label>
                    <input type="checkbox" id="dia_{{idfranja}}_6" {{checked_6}} /><label for="dia_{{idfranja}}_6">Sab</label>
                    <input type="checkbox" id="dia_{{idfranja}}_7" {{checked_7}} /><label for="dia_{{idfranja}}_7">Dom</label>
                </div>
            </td>
            <td>{{horario_desde}}</td>
            <td>{{horario_hasta}}</td>
            <td>
                <div class="editar_franja" idFranja="{{idfranja}}">Editar</div>
                <div class="borrar_franja" idFranja="{{idfranja}}">Borrar</div>
            </td>
        </tr>
	    </template>
		<template name="sin_resultados">
		<tr>
			<td colspan="5">No hay resultados para mostrar.</td>
		</tr>
		</template>
    </table>
    <script type="text/javascript">
        $(function(){
            $('.editar_franja').button( { icons: {primary: "ui-icon-note"} } ).bind('click', function() { editarFranja($(this).attr('idFranja')); } );
            $('.borrar_franja').button( { icons: {primary: "ui-icon-circle-close"} } ).bind('click', function() { borrarFranja($(this).attr('idFranja')); } );
            $('#page_content_inside').find('input:checkbox:not(:checked)').attr('disabled', 'disabled');
            $('.dias').buttonset();
        });

        function editarFranja(idFranja)
        {
            document.location.href = '{{edit_action}}'+idFranja;
        }

        function borrarFranja(idFranja)
        {
            $("#borrar_franja").dialog({
                resizable: false,
                height:240,
                modal: true,
                buttons:
                {
                    "Borrar franja y tiempos": function() {
                        $( this ).dialog( "close" );
                        document.location.href = '{{delete_action}}'+idFranja;
                    },
                    "Cancelar": function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
        }

    </script>
</template>